<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Demo 3 </title>
		<meta name="description" content="A slice reveal effect that shows animated slices between image transitions" />
		<meta name="keywords" content="reveal, slices, effect, animation, css, web development, web design" />
		<link rel="stylesheet" type="text/css" href="../static/css/base.css" th:href="@{/css/base.css}" />
		<link rel="stylesheet" type="text/css" href="../static/css/uncover.css" th:href="@{/css/uncover.css}" />
		<script>
		document.documentElement.className = "js";
		var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
		supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
		</script>
	</head>
	<body class="demo-3 loading">
		<main>
			<div class="content content--fixed">
				<header class="codrops-header">
					<h1 class="codrops-header__title">欢迎 <span shiro:principal property="userName"/> 使用至尊智能家居系统</h1>
					<nav class="demos">
						<a class="demo" href="/system/main"><span>Demo 1</span></a>
						<a class="demo" href="/system/index2"><span>Demo 2</span></a>
						<a class="demo demo--current" href="/system/index3"><span>Demo 3</span></a>
					</nav>
				</header>
				<a class="github" href="https://github.com/codrops/SliceRevealer" title="Find this project on GitHub">
					<svg class="icon icon--github">
						<use xlink:href="#icon-github"></use>
					</svg>
				</a>
			</div>
			<div class="content grid">
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/19.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#read</h2>
						<p class="grid__item-description">Find me tomorrow or never</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/12.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#find</h2>
						<p class="grid__item-description">Never end it like that</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/13.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#make</h2>
						<p class="grid__item-description">Why make noise like that?</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/14.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#love</h2>
						<p class="grid__item-description">No point in running</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/15.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#walk</h2>
						<p class="grid__item-description">When you get there</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/16.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#less</h2>
						<p class="grid__item-description">Timeless manners count</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/17.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#only</h2>
						<p class="grid__item-description">Together we can sit</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/18.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#need</h2>
						<p class="grid__item-description">The new kid on the block</p>
					</div>
				</div>
				<div class="grid__item">
					<div class="scroll-img" th:style="'background-image: url('+${'/img/11.jpg'}+');'"></div>
					<div class="grid__item-titlewrap">
						<h2 class="grid__item-title">#feed</h2>
						<p class="grid__item-description">The new kid on the block</p>
					</div>
				</div>
			</div>
		</main>
		<script th:src="@{/js/imagesloaded.pkgd.min.js}"></script>
		<script th:src="@{/js/anime.min.js}"></script>
		<script th:src="@{/js/uncover.js}"></script>
		<script th:src="@{/js/demo3.js}"></script>
	</body>
</html>